import QtQuick 2.0

Item {
    id: root;

    ListView {
        id: listView;
        width: 200;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.leftMargin: 20;
        anchors.bottom: parent.bottom;
        clip: true;
        focus: true;
        spacing: 5;
        currentIndex: 0;
        //        snapMode: ListView.SnapOneItem;

        model: 100;

        delegate: numberComponent;

        highlight: highComponent;
        highlightFollowsCurrentItem: false;
        header: hreaderComp;
        footer: footerComp;
    }


    //代理组件
    Component {
        id: numberComponent;

        Item {
            width: ListView.view.width;
            height: 40;

            Text {
                anchors.centerIn: parent;
                text: index;
                font.pointSize: 10;
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    listView.currentIndex = index;
                }
            }
        }
    }

    //高亮组件
    Component {
        id: highComponent;

        Item {
            width: ListView.view.width;
            height: ListView.view.currentItem.height;
            y: ListView.view.currentItem.y;

            Behavior on y {
                SequentialAnimation {
                    PropertyAnimation { target: rect; property: "opacity"; to: 0;
                        duration: 200;
                    }
                    NumberAnimation { duration: 1; }
                    PropertyAnimation { target: rect; property: "opacity"; to: 1;
                        duration: 200;
                    }
                }
            }

            Rectangle {
                id: rect;
                anchors.fill: parent;
                color: "#53d769";
            }
        }
    }

    //页眉
    Component {
        id: hreaderComp;

        Rectangle {
            width: ListView.view.width;
            height: 40;
            color: "yellow";

            Text {
                anchors.centerIn: parent;
                font.pointSize: 10;
                text: qsTr("header");
            }
        }
    }

    //页脚
    Component {
        id: footerComp;

        Rectangle {
            width: ListView.view.width;
            height: 40;
            color: "red";

            Text {
                anchors.centerIn: parent;
                font.pointSize: 10;
                text: qsTr("footer");
            }
        }
    }
}
